最近在找春季实习生工作,为了准备实习面试笔试,开通属于自己的专栏来记录自己的学习过程,同时也是为了检验自己是否真正的理解了学习的知识点。
一、DOM概念
今天学习的是JavaScript中的DOM操作。说起DOM操作,首先我们需要知道什么是DOM,DOM也叫文档对象模型,其中D代表的是Document,即文档;O代表的是Object,即对象;M代表的是model,即模型。
所谓模型,其实就是某种事物的表现形式,就像是一个火车模型代表的是真是的火车一样,DOM代表的是加载到浏览器并呈现在用户眼前的网页。DOM把一份文档表示成一棵树,叫做DOM树。既然有了树的概念,那就还有根,父节点,子节点,兄弟节点的概念了。在下面的网页中我们看一个例子:
<!Doctype html>
<html>
<head>
<title>这是测试例子</title>
</head>
<body>
<div>
<ul>
<li>例子</li>
<li>例子</li>
</ul>
<p>段落测试</p>
<div>
</body>
</html>
以上例子我们可以看到,<html>标签为根标签,接下来<head>和<body>标签属于<html>的子元素或者是子节点,在<head>标签中,<title>又是<head>的子标签,<body>中<div>是其子标签,<div>标签中<ul>与上面的p标签都是其子元素,而这两者是兄弟元素关系。
以上就是一个典型的文档树关系。
二、节点
在DOM中节点包括以下几种:
元素节点;文本节点;属性节点。
元素节点:
文档树中诸如<head><body><ul>等叫做元素节点,标签的名字就是元素的节点名字;
文本节点:
上面说的元素节点是一种结构节点,如果一个文档中全部是元素节点则不会显示任何内容,网页中的大部分的内容都是通过文本节点展现出来的。文本节点总是包含在元素节点内部。
属性节点:
属性节点用来对元素做出更加详细的描述。几乎每个元素节点都会有一个title属性,用来描述该元素节点是用来干什么的。
三、DOM的相关操作
1、获取元素
获取元素有三种方法可以获得:
(1)getElementById()该方法接收一个参数,这个参数是元素的id属性值,该方法返回一个id属性值为相应值的元素对象
(2)getElementByTagName()改方法也接收一个参数,参数为元素名称,该方法返回的是一个对象数组。即使匹配的元素只有一个同样也会是数组类型,只是数组长度为1。
(3)getElementByClass()该方法接收一个参数,即元素属性为class的值,该方法也返回一个数组。
未完待续
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。